<template>
  <div>
    <div class="title-wrapper">
      <div class="tab_box">
        <span class="tab_title is_active">{{title}}</span>
      </div>
      <ul class="helpbox">
        <li v-for="(contItem, contIndex) in noticeList.list" :key="contIndex">
          <router-link :to="{name: 'NoticeContent', params: {type: noticetype, id: contItem.id}}" class="title">
            <span class="box-content ellipsis">{{contIndex + 1 }}:{{contItem.title}} </span>
            <span class="time">{{contItem.publishTime}}</span></router-link>
          <!-- <a class="title" @click="fetchContent(contItem.id)">{{contIndex + 1 }}:{{contItem.title}} <span class="time">{{contItem.publishTime}}</span></a> -->
        </li>
      </ul>
      <!-- pagination -->
      <el-row v-if="noticeList.page && noticeList.page.totalPages > 1">
        <el-pagination class="page_box"  layout="total, prev, pager, next, ->"  :total="noticeList.page.totalRecords" :page-size="noticeList.page.pageSize" @current-change="handlePage" ></el-pagination>
      </el-row>
    </div>
    <!-- <div class="content" v-else>
      <el-button type="text" icon="el-icon-arrow-left" @click="goBack">返回</el-button>
      <div class="content-box">
        <h2 class="title">{{content.title}}</h2>
        <h2 class="time">{{content.publishTime}}</h2>
        <div class="word-content" v-html="content.content"></div>
      </div>
    </div> -->
  </div>
</template>

<script>
  import {Tabs, TabPane, Collapse, CollapseItem, Button} from 'element-ui'
  import {tab} from '@/components/index'
  import {noticelist, noticeContentObj} from '@/service/get-data'
  export default {
    components: {
      elTabs: Tabs,
      elTabPane: TabPane,
      elCollapse: Collapse,
      elCollapseItem: CollapseItem,
      tab,
      elButton: Button
    },
    data () {
      return {
        titleShow: true, // 标题列表展现
        type: 0, // 0网站公告，1业界动态
        page: 1,
        number: 20,
        noticeList: {}, // 帮助列表
        tablist: [{name: 'website', text: '网络公告'}, {name: 'industry', text: '行业资讯'}, {name: 'companyInfo', text: '公司资讯'}],
        content: {}
      }
    },
    methods: {
      async fetchHelpList () {
        let loadingHelp = this.$loading({target: '.helpbox'})
        let res = await noticelist(this.page, this.number, this.type)
        if (res.data.resultCode && res.data.resultCode === 2000) {
          loadingHelp.close()
          res = res.data
          this.noticeList = res.data
        } else {
          this.$message({
            message: res.data.resultMsg
          })
        }
      },
      // 获取帮助内容
      async fetchContent (id) {
        this.titleShow = false
        let res = await noticeContentObj(id)
        if (res.data.resultCode && res.data.resultCode === 2000) {
          res = res.data
          this.content = res.data
        }
      },
      // 返回
      goBack () {
        this.titleShow = true
      },
      handlePage (page) {
        this.page = page
        this.fetchHelpList()
      }
    },
    computed: {
      title () {
        let param = this.$route.params.type
        if (param === 'website') {
          this.type = 0
          return '网站公告'
        } else if (param === 'industry') {
          this.type = 1
          return '行业资讯'
        } else {
          this.type = 2
          return '公司资讯'
        }
      },
      noticetype () {
        let param = this.$route.params.type
        return param
      }
    },
    beforeRouteUpdate (to, from, next) {
      this.titleShow = true
      this.content = {}
      let param = to.params.type
      if (param === 'website') {
        this.type = 0
      } else if (param === 'industry') {
        this.type = 1
      } else {
        this.type = 2
      }
      this.fetchHelpList()
      next()
    },
    activated () {
      this.fetchHelpList()
    }
  }
</script>

<style lang="scss" scoped>
  .title{
    display: block;
    font-size: 14px;
    color: #666;
    line-height: 40px;
    &:hover{
      background-color: #f0f0f0;
    }
    .time{
      display: inline-block;
      padding-left: 20px;
    }
  }
  .box-content{
    max-width: 780px;
    display: inline-block;
    vertical-align: middle;
  }
  .content{
    font-size: 14px;
    color: #666666;
  }
  /*
  * tab
  */ 
  .tab_box{
    width: 100%;
    overflow: hidden;
    position: relative;
    font-size: 0;
     
    // height: 40px;
    margin-bottom:21px;
    &::after {
      position: absolute;
      content: "";
      left: 0;
      bottom: 0;
      width: 100%;
      height: 1px;
      background-color: #ececec;
      z-index: 1;
    }
  }
  .tab_title{
    position: relative;
    cursor: pointer;
    display: inline-block;
    width:120px;
    text-align: center;
    padding-bottom: 13px;
    // height: 40px;
    box-sizing: border-box;
    line-height: 25px;
    font-size: 18px;
    font-weight: 500;
     color: #666;
    transition: all;
    &:nth-child(odd){
    margin-left: 0
    }
    &.is_active{
      color: #333333;
      // border-bottom: 2px solid #333333;
      &:after{
        position: absolute;
        content: "";
        left: 0;
        bottom: 0;
        width: 120px;
        height: 2px;
        background-color: #333333;
        z-index: 2;
      }
    }
  }
  .content-box{
    border: 1px solid #f0f0f0;
    padding: 14px 12px;
    font-size: 14px;
    color: #666666;
    line-height: 20px;
    .title{
      text-align: center;
      color: #000;
      font-size: 16px;
      line-height: 25px;
    }
    .time{
      text-align: center;
    font-size: 12px;
    }
  }
</style>
<style>
  .word-content img{
    width: 100%;
  }
</style>

